<template>
  <t-steps layout="vertical" :current="current" status="process" class="steps-demos-extra">
    <t-step-item title="步骤1" content="这里是提示文字">
      <template v-if="current === 0" #extra>
        <t-button size="small" variant="base" @click="current++"> 下一步 </t-button>
      </template>
    </t-step-item>
    <t-step-item title="步骤2" content="这里是提示文字">
      <template v-if="current === 1" #extra>
        <t-button size="small" variant="text" @click="current--"> 上一步 </t-button>
        <t-button size="small" variant="base" @click="current++"> 下一步 </t-button>
      </template>
    </t-step-item>
    <t-step-item title="步骤3" content="这里是提示文字">
      <template v-if="current === 2" #extra>
        <t-button size="small" variant="text" @click="current--"> 上一步 </t-button>
        <t-button size="small" variant="base" @click="current++"> 下一步 </t-button>
      </template>
    </t-step-item>
    <t-step-item title="步骤4" content="这里是提示文字">
      <template v-if="current === 3" #extra>
        <t-button size="small" @click="current--"> 上一步 </t-button>
      </template>
    </t-step-item>
  </t-steps>
</template>

<script setup>
import { ref } from 'vue';

const current = ref(0);
</script>
<style lang="less" scoped>
.steps-demos-extra {
  .t-button + .t-button {
    margin-left: 4px;
  }
}
</style>
